<template>
	<div class="table_message">
		<tableView v-model="rowClick" :table-data="tableData" @hook:mounted="tableMounted">
			<template #searchCondition>
				<el-form label-position="left" label-width="auto" inline>
					<el-form-item label="测试测试">
						<el-input />
					</el-form-item>
					<el-form-item label="测试测试">
						<el-input />
					</el-form-item>
					<el-form-item label="测试测试">
						<el-input />
					</el-form-item>
					<el-form-item label="测试测试">
						<el-input />
					</el-form-item>
					<el-collapse-transition>
						<div v-show="show3" class="more">
							<div>
								<el-form-item label="测试测试">
									<el-input />
								</el-form-item>
								<el-form-item label="测试测试">
									<el-input />
								</el-form-item>
							</div>
						</div>
					</el-collapse-transition>
				</el-form>
				<el-button style="width: 100%" :icon="!show3 ? 'el-icon-caret-bottom' : 'el-icon-caret-top'" @click="show3 = !show3" />
			</template>
			<template #table-column>
				<el-table-column fixed prop="date" label="时间" width="400px" />
				<el-table-column prop="name" label="名字" width="400px" />
				<el-table-column prop="address" label="地址" width="400px">
					<template slot-scope="{ row }">
						<span v-if="!row.edit">{{ row.address }}</span>
						<el-input v-else v-model="row.address" />
					</template>
				</el-table-column>
				<el-table-column fixed="right" prop="handle" label="操作" width="400px">
					<template slot-scope="scope">
						<el-button type="primary" icon="el-icon-edit" circle @click.stop="editBtn(scope)" />
						<el-button type="danger" icon="el-icon-delete" circle @click.stop="delBtn(scope)" />
					</template>
				</el-table-column>
			</template>
		</tableView>
	</div>
</template>

<script>
import tableView from "@/components/table_view/index";
import _list from "./list";
export default {
	name: "TableMessage",
	components: { tableView },
	data() {
		return {
			rowClick: {},
			tableData: {
				pageNum: 1,
				pageSize: 10,
				total: 20,
				list: _list,
				page: 0,
			},
			show3: false,
		};
	},
	watch: {
		rowClick() {
			console.log(this.rowClick);
		},
	},
	mounted() {},
	methods: {
		/*  @hook:mounted 可以监听组件生命周期 */
		tableMounted() {
			console.log(1);
		},
		editBtn(scope) {
			this.$set(scope.row, "edit", true);
		},
		delBtn(scope) {
			this.tableData.list.splice(scope.$index, 1);
		},
	},
};
</script>

<style lang="scss" scoped>
.table_message {
}
</style>
